<!-- templates/stories/generate.html -->
{% extends 'base.html' %}

{% block title %}生成故事 - AI故事生成器{% endblock %}

{% block content %}
<div class="page-container">
    <h1> 生成你的专属故事</h1>
    <p>输入关键词，AI 将为你创作一个独特的故事。</p>

    <!-- 生成表单 -->
    <form id="storyForm" class="story-form">
        <div class="form-group">
            <label for="keywords">关键词（如：魔法猫、太空冒险）</label>
            <input
                type="text"
                id="keywords"
                name="keywords"
                placeholder="请输入故事关键词"
                required
            />
        </div>

        <div class="form-group">
            <label for="genre">故事类型</label>
            <select id="genre" name="genre">
                <option value="奇幻">奇幻</option>
                <option value="科幻">科幻</option>
                <option value="爱情">爱情</option>
                <option value="悬疑">悬疑</option>
                <option value="童话">童话</option>
            </select>
        </div>

        <button type="submit" class="btn">生成故事</button>
    </form>

    <!-- 加载状态 -->
    <div id="loading" class="loading" style="display: none;">
         AI 正在为你创作故事，请稍候...
    </div>

    <!-- 故事结果 -->
    <div id="result" class="story-result" style="display: none;">
        <h2 id="storyTitle"></h2>
        <p id="storyContent"></p>
        <a href="#" id="saveBtn" class="btn">保存故事</a>
    </div>
</div>
{% endblock %}